import React from "react";
import SeachHead from '../../components/head/head'
import {WingBlank,Carousel,Grid} from 'antd-mobile'
import axios from "../../utils/axios.js";

// 导入导航菜单图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'
export default class Index extends React.Component{
    headStyle={
        position: 'absolute',
        top: '25px',
    }
    state={
        imgArr:[],
        gridArr:[],
        newsArr:[]

    }
    getImgArr=async ()=>{
        let res=await axios.get('/home/swiper')
        this.setState({
            imgArr:res.data.body
        })
    }
    getGridArr=async ()=>{
        let res=await axios.get('/home/groups')
        this.setState({
            gridArr:res.data.body
        })
    }
    getNewsArr=async ()=>{
        let res=await axios.get('/home/news')
        console.log(res)
        this.setState({
            newsArr:res.data.body
        })
    }
    componentDidMount(){
        this.getImgArr()
        this.getGridArr()
        this.getNewsArr()
    }
    render(){
        let {imgArr,gridArr,newsArr}=this.state
        return <div className='home-index'>
            <SeachHead  headStyle={this.headStyle} />
            <div className="space-carousel">
                {imgArr.length>0?<WingBlank>
                    <Carousel autoplay infinite>
                        {imgArr.map(item=>{
                           return <div className='img-div' key={item.id}>
                                <img  alt=''
                                    src={`http://localhost:8080${item.imgSrc}`}
                                    style={{ width: '100%',height:'212px', verticalAlign: 'top' }}
                                />
                            </div>
                        })}
                    </Carousel>
                    </WingBlank>:""}
            </div>
            <div className='menu-grid'>
               {menuGrid.map(item=>{
                   return   <div className='menu-item'  key={item.id}>
                                <img src={item.img} alt='' className='menu-img'/>
                                <span className='menu-text'>{item.title}</span>
                            </div>
                })}
            </div>
            <div className='group-grid'>
              <div className='head'>
                 <span className='left'>租房小组</span>
                 <span className='right'>更多</span>
              </div>
              <Grid data={gridArr}
                    square={false}
                    hasLine={false}
                    columnNum={2}
                    renderItem={item => (
                       <div className='group-item' key={item.id}>
                          <div className='left'>
                              <div className='h-15 c-3'>{item.title}</div>
                              <div className='h15 c-5'>{item.desc}</div>
                          </div>
                          <img src={`http://localhost:8080${item.imgSrc}`} alt="" className='right' />
                       </div>
                    )}
                />
            </div>
            <div className='news'>
               <div className='head'>最新资讯</div>
               <div className='main'>
                   {newsArr.map(item=>{
                      return  <div className='main-item' key={item.id}>
                            <img className='img' src={`http://localhost:8080${item.imgSrc}`} alt=''></img>
                            <div className='right'>
                                <div className='text'>{item.title}</div>
                                <div className='bottom'>
                                    <span>{item.from}</span>
                                    <span>{item.date}</span>
                                </div>
                            </div> 
                        </div>
                   })}
                   
               </div>
            </div>
        </div>
    }
}



let menuGrid= [
    {
      id: 1,
      img: Nav1,
      title: '整租',
      path: '/home/list'
    },
    {
      id: 2,
      img: Nav2,
      title: '合租',
      path: '/home/list'
    },
    {
      id: 3,
      img: Nav3,
      title: '地图找房',
      path: '/map'
    },
    {
      id: 4,
      img: Nav4,
      title: '去出租',
      path: '/rent/add'
    }
  ]
